
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>DOM操作-练习</title>
		<style type="text/css">
			body {
				font-size: 13px;
				line-height: 25px;
			}
			
			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 300px;
			}
			
			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
			}
			
			.center {
				text-align: center;
			}
		</style>
		
	</head>

	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="myTable">
			<tr id="row1">
				<td>书名</td>
				<td>价格</td>
			</tr>
			<tr id="row2">
				<td>看得见风景的房间</td>
				<td class="center">&yen;30.00</td>
			</tr>
			<tr id="row3">
				<td>60个瞬间</td>
				<td class="center">&yen;32.00</td>
			</tr>
		</table>
		<input name="b1" type="button" value="增加一行" onclick="addRow()" />
		<input name="b2" type="button" value="删除第2行" onclick="delRow()" />
		<input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
		<input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />

	</body>
	<script src="jquery-3.3.1.min.js"></script>
	 <script>
	      function addRow() {
	        var fRow = $("#row3");
	        var newRow = $("<tr></tr>"); //创建行节点
	        var col1 = $("<td>幸福从天而降</td>"); //创建单元格节点并添加元素
	        var col2 = $("<td>&yen;18.50</td>"); //创建单元格节点并添加元素
	        col2.css("text-align", "center");
	        col1.appendTo(newRow); //把单元格添加到行节点中
	        col2.appendTo(newRow);
	        fRow.before(newRow); //把行节点添加到表格末尾
	      }
	      function updateRow() {
	        var uRow = $("#row1");
	        //标题行设置为字体加粗、文本居中显示，背景颜色为灰色
	        uRow.css({
	          fontWeight: "bold",
	          textAlign: "center",
	          backgroundColor: "#cccccc",
	        });
	      }
	
	      function delRow() {
	        var dRow = $("tr"); //访问被删除的行
	        if (dRow[2] != null) {
	          dRow[2].remove(dRow[2]); //删除行
	        }
	      }
	
	      function copyRow() {
	        var oldRow = $("#row3"); //访问复制的行
	        var newRow = oldRow.clone(true); //复制指定的行及子节点,添加true使复制过的还能继续复制
	        $("#myTable").append(newRow); //在指定节点的末尾添加行
	      }
	    </script>		<!-- 219970832唐宇杰-->
	

</html>